
//在这里我要做的是获取现在本地存储中的所有数据，并且将他们存到数组中
//先试着按照id获取一下对应的数据
let obj=localStorage.getItem("1")
/* 这个时候已经可以正常获取到缓存当中的数据了 */
/* 现在开始试着一次获取 */
//开始循环 循环数量从1到8获取1-8对应的所有对象
//定义一个全局数组，用来存放从页面缓存中获得的对象
let arr=[]
//定义全局变量numb用来计算当前商品数量
let numb=0
for(let i=1;i<=8;i++){
    let obj=JSON.parse(localStorage.getItem(JSON.stringify(i)))
    arr.push(obj)
    //这时候已经可以成功获取本地缓存里面所有的对象了,建立一个数组，每次获取到的时候就将这些对象存入数组
}
let arr2=[]
arr.forEach((ele)=>{
    if(ele!=null){
        arr2.push(ele)
    }
})
//这时的arr2就是剔除空对象时候的数组了，可以根据arr2的下标数值来判断删除哪个对应id的缓存
console.log(arr2)
//到这里就已经获取到所有的数据并且构成数组了，现在要做的是将数组中的对象循环渲染到页面中
let jieSuanYeMian=document.querySelector('.jieSuanYeMian')
arr2.forEach((ele)=>{
        numb++
        var abc=ele.imgurl.split("*")
        jieSuanYeMian.innerHTML+=`
            <div class="jieSuanYeMian_L ">
            <div class="jieSuanYeMian_L_f">
                <h2>${ele.name}</h2>
                <ul>
                    <li>绑定三星账号，购物可获取和使用三星积分</li>
                    <li>
                        <input class="bangDing fw" type="button" value="绑定三星账号">
                    </li>
                </ul>
            </div>
            <div class="jieSuanYeMian_L_s">
                <div>
                    
                    <span>全选</span>
                </div>
                <span>商品</span>
                <span>单价</span>
                <span>积分</span>
                <span>数量</span>
                <span>小计</span>
                <span>操作</span>
            </div>
            <div class="jieSuanYeMian_L_t">
                <input class="chooseThis" type="checkbox" >
                <img src="${abc[0]}" alt="">
                <ul>
                    <li>${ele.name}陨石黑 12GB+512GB</li>
                    <li>内存/12GB RAM512GB ROM 陨石黑</li>
                </ul>
                <ul>
                    <li>¥${ele.price}</li>
                    <li>以旧换新</li>
                </ul>
                <span class="jiShu">0</span>
                <ul class="controlNumber">
                    <li><button class="minus">-</button></li>
                    <li><span class="jishu2">0</span></li>
                    <li><button class="add">+</button></li>
                </ul>
                <span class="nowPrice">${ele.price2}</span>
                <ul class="operate">
                    <li>移入收藏夹</li>
                    <li class="delate">删除</li>
                    <li>修改</li>
                </ul>
            </div>
            <div class="jieSuanYeMian_L_zhankai">
                <span>查看更多信息 > </span>
            </div>
            <div class="jieSuanYeMian_L_four off">
                <section>
                    <li>管家服务</li>
                    <li>6折购买 12个月优惠换屏/后壳服务</li>
                    <li>X ${ele.id}</li>
                    <li>¥${ele.price2}</li>
                    <li>修改</li>

                </section>
                <section>
                    <li>管家服务</li>
                    <li>6折购买 12个月优惠换屏/后壳服务</li>
                    <li>X 1</li>
                    <li>¥699.00</li>
                    <li>修改</li>
                </section>
                <section>
                    <li>管家服务</li>
                    <li>6折购买 12个月优惠换屏/后壳服务</li>
                    <li>X 1</li>
                    <li>¥699.00</li>
                    <li>修改</li>
                </section>
            </div>
            <div class="jieSuanYeMian_L_shouqi off">
                <span>收起 < </span>
            </div>
            <div class="jieSuanYeMian_L_five">
                <ul>
                    <li>优惠组合</li>
                    <li>购精选套装商品，搭配购买更优惠</li>
                </ul>
                <li>添加</li>
            </div>
            </div>`
    
   
   
})
//这两个东西是控制更多信息的展开与折叠
{
    let oJieSuanYeMian_L_zhankai=document.querySelectorAll('.jieSuanYeMian_L_zhankai')
let oJieSuanYeMian_L_shouqi=document.querySelectorAll('.jieSuanYeMian_L_shouqi')
let oJieSuanYeMian_L_four=document.querySelectorAll('.jieSuanYeMian_L_four')
oJieSuanYeMian_L_zhankai.forEach((ele,index)=>{
    ele.onclick=function(){
        ele.classList.add('off')
        oJieSuanYeMian_L_four[index].classList.remove('off')
        oJieSuanYeMian_L_shouqi[index].classList.remove('off')
    }
})
oJieSuanYeMian_L_shouqi.forEach((ele,index)=>{
    ele.onclick=function(){
        ele.classList.add('off')
        oJieSuanYeMian_L_four[index].classList.add('off')
        oJieSuanYeMian_L_zhankai[index].classList.remove('off')
    }
})
}

//这两个东西是共几件商品和已选择几件
let allNumb=document.querySelector('.allNumb')
allNumb.innerHTML=`<b>${numb}</b>`
//下面是控制全选与分选的
{
//获取页面上当前所有的子选中框
let chooseThis=document.querySelectorAll('.chooseThis')
//获取全选框
let allCheck=document.querySelector('.allCheck')
//当前页面上的子选中框有三个，也就是长度为三

let choosenumb=document.querySelector('.choosenumb')
//获取显示总价部分的span
let totalPrices=document.querySelector('.totalPrices')
//获取在外面的显示单个商品数量的span
let jiShu=document.querySelectorAll('.jiShu')
//在里面显示的单个商品的数量
let jiShu2=document.querySelectorAll('.jishu2')










let z=0
//这段代码是子选择框被点击的时候发生的处理程序
//price3的作用是控制价格的变量
let price3=0
//这个price4是用来控制当前商品数量的
let price4=0
chooseThis.forEach((ele,index)=>{
    ele.onclick=chooseThisClick
    function chooseThisClick(){
        if(ele.checked===true){
            //外部计数被暂时重置为1
            price4=1
            jiShu2[index].innerHTML=price4
            //获取index对应的arr数组对象里的price
            price3 += parseInt(arr2[index].price)
            totalPrices.innerHTML=`${price3}`
            z++
            choosenumb.innerHTML=`${z}`
        }else{
            //外部计数被暂时重置为0
            price4=0
            jiShu2[index].innerHTML=price4
            price3 -= parseInt(arr2[index].price)
            totalPrices.innerHTML=`${price3}`
            z--
            choosenumb.innerHTML=`${z}`
        }
       if(z>=chooseThis.length){
            allCheck.checked=true
       }else{
        allCheck.checked=false
       }
    }
    
})




//这段代码是全选按钮被选中的时候发生的函数
allCheck.onclick=allCheckClick
    //当全选被点击的时候发生的事件
    function allCheckClick(){
    if(this.checked===false){
        totalPrices.innerHTML=0
        chooseThis.forEach((ele)=>{
            ele.checked=false
            z=0
            choosenumb.innerHTML=`${z}`
        })
    }else{
        arr2.forEach((ele)=>{
           price3+=parseInt(ele.price)
           totalPrices.innerHTML=`${price3}`
        })
        chooseThis.forEach((ele)=>{
            ele.checked=true
            z=chooseThis.length
            choosenumb.innerHTML=`${z}`
        })
    }
    }





//获取页面上所有的增加按钮和减少按钮
let minus=document.querySelectorAll('.minus')
let add=document.querySelectorAll('.add')
//获取页面上的所有当前商品总价span
let nowPrice=document.querySelectorAll('.nowPrice')
let totalPricess=document.querySelector('.totalPrices')
console.log(totalPricess.innerHTML)
//当减少按钮被点击的时候商品数量减一，但是不会小于零



//----------------------------------------------------------------------------
//这段话控制的是子选择框里的减法被点击的时候发生的事情
minus.forEach((ele,index)=>{
    ele.onclick=minusclick
    //将减号被点击的时候发生的事件作为函数单独抽离出来
    function minusclick(){
        //1.判断当前商品数量是否不为零
        if(price4>0){
            //如果price4不为0就让其减一
            price4--
            jiShu2[index].innerHTML=price4
            //当前商品的总价格为默认价格*price4
            gouzi=(parseInt(nowPrice[index].innerHTML))
            nowPrice[index].innerHTML=price4*gouzi
            //也应该同时修改外部所有商品总价的数量
            let xiaomao1=parseInt(totalPrices.innerHTML)
            xiaomao1-=parseInt(arr2[index].price)
            totalPrices.innerHTML=`${xiaomao1}`
            if(price4===0){
                z--
               choosenumb.innerHTML=`${z}`
                console.log("当前商品数量为0");
                chooseThis[index].checked=false
                //已选择商品数量也应该增加
            }
        }else{
            return
        }
    }
})





//这段代码控制的是子选择框加号被点击的处理结果
add.forEach((ele,index)=>{
    ele.onclick=function(){
     if(price4===0){
         z++
        choosenumb.innerHTML=`${z}`
         console.log("当前商品数量为0");
         chooseThis[index].checked=true
         //已选择商品数量也应该增加
     }
       /*  chooseThis.forEach((ele,index)=>{
            ele.onclick=chooseThisClick} */
        //1。如果是加法的话就不做限制了
        if(price4>=5){
            alert("小伙子醒醒你没你想象中富有")
        }else{ 
            console.log(totalPricess.innerHTML)
            price4++
            jiShu[index].innerHTML=price4
            jiShu2[index].innerHTML=price4
            //当前商品的总价格为默认价格*price4
            gouzi=(parseInt(nowPrice[index].innerHTML))
            nowPrice[index].innerHTML=price4*gouzi}
            //如果price4不为0就让其减一
            let xiaomao=parseInt(totalPrices.innerHTML)
            xiaomao+=parseInt(arr2[index].price)
            totalPrices.innerHTML=`${xiaomao}`
    }
})





//接下来我们开始写删除功能
//获取所有的删除小块
let delate=document.querySelectorAll('.delate')
let jieSuanYeMian_L=document.querySelectorAll('.jieSuanYeMian_L')
//我们可以看到一共获取到了四个删除框，接下来创建点击事件
delate.forEach((ele,index)=>{
    ele.onclick=function(){
        //当被点击的时候，首先要获取到的是当前的下标
        let delateIndex=index
        //然后去数组arr2中获取该下表对应的id数值
        let delateId=arr2[delateIndex].id
        //至此，对应的id也获取到了，然后要做的就是去缓存中删除这个id对应的数据
        localStorage.removeItem(delateId)
        //缓存中的数据已经清除完成，接下来要做的就是让删除对应的大框displaynone
        jieSuanYeMian_L[index].style.display="none"
    }
})
}

//既然之前的程序像是一团散沙，那我们现在就换一个思路，现在的思路是，上面的总选择框作为一个神经中枢，下面所进行的所有计算最后都要交给总选择框
//现在创立一个对象，用来存储子选择框计算所得到的结果
let duixiang={
    allPrice:'',//这里负责存放所有商品经过计算所取得的总价格，这里的数值是要赋值给总选择框的，子选择框的操作会使得这里的数值发生变化
    allNumber:'',//这里负责存放所有商品的选择情况，这里的数量信息会赋值给总选择框的已选择商品数量上
    //这里的childNumber是程序在最开始自动生成的通过判断场上的子选择框的数量生成对应的数量这里面存放的数据是子选择框分别独立的商品数量，只要这里的数值大于等于1，那么对应的allNumber的数量就会加一，allPrice的价格是childNumber的数量分别乘以对应的价格之后相加的价格，也就是说，每次点击商品价格加一或者减一的时候，这里的数量就会相应的增加或者减少，而且这里数量的增加和减少会同时影响到总商品价格的增加和减少，这种影响商品价格的方式是通过影响childprice做到的,商品的总价格就是price1 2 3的价格之和，
    //影响到ChildNumber的方式有两种，第一种是点击商品子选择框里面的checkbox，在点击的时候会对当前对应的ChildNumber进行判断，如果为0则加一，如果大于等于1就将其归零，第二种是点击对应子选择框里的加或者减，在点击加的时候会对这个子选择框对应的checkbox的状态进行判断，如果已被选中就正常加一，如果没被选中那就让这个选择框被选中，选中的同时使得这个商品的数量++，在点击减的时候先对当前商品数量进行判断如果点击的时候商品数量大于零才允许--，运行自减操作结束后如果为0的话就去取消当前checkbox的选中状态
    childNumber1:'',
    childNumber2:'',
    childNumber3:'',
    childparce1:'',
    childPrice2:'',
    childPrice3:'',



}